import React from 'react';

// 定义HeaderApp组件
const HeaderApp = () => {
    // 固定时间为12:00，仿iPhone
    const time = '12:00';
    return (
        // 顶部状态栏容器，flex布局，垂直居中
        <div style={{
            width: '100%',
            height: '45px', // 约等于iPhone状态栏高度
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            // background: 'rgb(255, 255, 255)',
            padding: '0 12px',
            boxSizing: 'border-box',
            fontFamily: 'SF Pro, Arial, sans-serif',
            fontSize: '15px',
            color: 'black',
            position: 'relative',
            borderBottom: '1px solid rgb(251, 251, 251)',
        }}>
            {/* 左侧时间 */}
            <div style={{fontWeight: 500}}>{time}</div>

            {/* 中间灵动岛 */}
            <div style={{
                position: 'absolute',
                left: '50%',
                transform: 'translateX(-50%)',
                width: '100px',
                height: '28px',
                background: 'black',
                borderRadius: '18px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                boxShadow: '0 0 4px rgba(0,0,0,0.2)'
            }}>
                {/* 灵动岛摄像头小圆点 */}
                <div style={{
                    width: '10px',
                    height: '10px',
                    background: '#111',
                    borderRadius: '50%',
                    marginLeft: '40px',
                    boxShadow: '0 0 2px #222'
                }}></div>
            </div>

            {/* 右侧图标区域 */}
            <div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
                {/* 信号图标（用简单div模拟） */}
                <div style={{display: 'flex', alignItems: 'flex-end', height: '14px'}}>
                    <div style={{width: '2px', height: '6px', background: '#222', marginRight: '1px', borderRadius: '1px'}}></div>
                    <div style={{width: '2px', height: '9px', background: '#222', marginRight: '1px', borderRadius: '1px'}}></div>
                    <div style={{width: '2px', height: '12px', background: '#222', marginRight: '1px', borderRadius: '1px'}}></div>
                    <div style={{width: '2px', height: '14px', background: '#222', borderRadius: '1px'}}></div>
                </div>
                {/* WiFi图标（SVG） */}
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {/* WiFi弧线 */}
                    <path d="M2 7C5 4 13 4 16 7" stroke="#222" strokeWidth="1.2" strokeLinecap="round"/>
                    <path d="M5 10C7 8.5 11 8.5 13 10" stroke="#222" strokeWidth="1.2" strokeLinecap="round"/>
                    <circle cx="9" cy="12" r="1" fill="#222"/>
                </svg>
                {/* 电池图标（SVG） */}
                <svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {/* 电池外框 */}
                    <rect x="1" y="2" width="18" height="8" rx="2" stroke="#222" strokeWidth="1.2" fill="none"/>
                    {/* 电池电量（80%） */}
                    <rect x="3" y="4" width="12" height="4" rx="1" fill="#222"/>
                    {/* 电池头 */}
                    <rect x="19.5" y="5" width="2" height="2" rx="0.7" fill="#222"/>
                </svg>
            </div>
        </div>
    )
}

export default HeaderApp;
